<template>
  <div>
    <a-card :bordered="false">
      <f-search-form :more="false" @searchHandler="searchHandler">
        <f-search-form-item label="状态" name="status"/>
        <f-search-form-item label="项目代码" name="projectCode"/>
        <f-search-form-item label="项目名称" name="projectName"/>
        <f-search-form-item label="专业代码" name="majorCode" slot="advanced"/>
        <f-search-form-item label="专业名称" name="majorName" slot="advanced"/>
        <f-search-form-item label="工程包代码" name="packageNo" slot="advanced"/>
        <f-search-form-item label="工程包名称" name="packageName" slot="advanced"/>
        <f-search-form-item label="冲销申请人" name="userName" slot="advanced"/>
        <f-search-form-item label="冲销申请时间" name="appTime" slot="advanced"/>
        <f-search-form-item label="领料申请ID" name="recDecId" slot="advanced"/>
      </f-search-form>
      <f-table ref="table"
               rowKey="recDecId"
               :columns="columns"
               :exportBtn="true"
               :multiple="true" :operator="operator"
               :params="queryParam"
               :api="api.recDeliBkReqConf"
               :scroll="{ x: 1300, y: 500 }"
               :dataSource="dataSource">
        <!-- 编辑 -->
        <!--        <template v-for="col in editSlots" :slot="col" slot-scope="text, record, index" :row-selection="rowSelection">-->
        <!--          <div :key="col">-->
        <!--            <a-date-picker v-if="editingKey === record.recDecId && col ==='budatBk'" type="date" style="width: 100%"-->
        <!--                           v-model="budatBk" @change="handleChange(budatBk, record.recDecId, col, record)"></a-date-picker>-->
        <!--            <a-date-picker v-else-if="editingKey === record.recDecId&&col =='bldatBk'" type="date" style="width: 100%"-->
        <!--                           v-model="bldatBk" @change="handleChange(bldatBk, record.recDecId, col, record)"></a-date-picker>-->
        <!--            <a-input v-else-if="editingKey === record.recDecId && col ==='bktxtBk'" style="margin: -5px 0"-->
        <!--                     :value="text" @change="(e) => handleChange(e.target.value, record.recDecId, col, record)"/>-->
        <!--            <template v-else>-->
        <!--              {{ text }}-->
        <!--            </template>-->
        <!--          </div>-->
        <!--        </template>-->
        <!--        <template slot="operation" slot-scope="text, record,index">-->
        <!--          <template>-->
        <!--            <span v-if="editingKey === record.recDecId">-->
        <!--              <a @click="() => edit(record, record.recDecId)">更新</a>-->
        <!--            </span>-->
        <!--            <span v-else-if="editingKey === '' && record.status !== 1 && record.status !== 2">-->
        <!--              <a @click="() => edit(record, record.recDecId)">填写</a>-->
        <!--            </span>-->
        <!--            <span v-else>-->
        <!--              不可操作-->
        <!--            </span>-->
        <!--          </template>-->
        <!--        </template>-->
        <!-- 状态标识 -->
        <a-tag v-if="syncStatus === '0'" color="geekblue" slot="syncStatus" slot-scope="syncStatus">
          {{ syncStatus | formatSyncStatusForCancel }}
        </a-tag>
        <a-tag v-else-if="syncStatus === '1'" color="geekblue" slot="syncStatus" slot-scope="syncStatus">
          {{ syncStatus | formatSyncStatusForCancel }}
        </a-tag>
        <a-tag v-else-if="syncStatus === '2'" color="green" slot="syncStatus" slot-scope="syncStatus">
          {{ syncStatus | formatSyncStatusForCancel }}
        </a-tag>
        <a-tag v-else-if="syncStatus === '3'" color="volcano" slot="syncStatus" slot-scope="syncStatus">
          {{ syncStatus | formatSyncStatusForCancel }}
        </a-tag>
        <a-tag v-else color="volcano" slot="syncStatus" slot-scope="syncStatus">
          {{ syncStatus | formatSyncStatusForCancel }}
        </a-tag>
        <span slot="createTime" slot-scope="createTime">
          {{ createTime | format }}
        </span>
      </f-table>
      <brdrb-drawer ref="drawer"></brdrb-drawer>
    </a-card>
    <div v-if="visible">
      <a-modal
        title="出库冲销选择"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel">
        <span>过账日期：</span>
        <a-date-picker name="postDate" type="date" style="width: 85%; margin-bottom: 15px;"
                       v-model="postDate" @change="dataValueChangeForPostDate"></a-date-picker>
        <span>凭证日期：</span>
        <a-date-picker name="cerDate" type="date" style="width: 85%; margin-bottom: 15px;"
                       v-model="cerDate" @change="dataValueChangeForcerDate"></a-date-picker>
        <span>抬头文本：</span>
        <a-input name="cerTxt" style="width: 85%; margin-bottom: 15px;" @change="valueChange"/>
      </a-modal>
    </div>
  </div>
</template>
<script>
  import brdrbDrawer from './recDeliBkReqConf_drawer.vue'
  import api from './js/api'
  import { formatDate, formatSyncStatusForCancel } from '../common/data'

  export default {
    name: 'TableList',
    components: {
      brdrbDrawer
    },
    data() {
      const me = this
      //操作按钮
      let operator = []
      operator.push({
        name: '冲销驳回',
        icon: 'close',
        that: this,
        batch: true,
        handler: function(table, that) {
          that.reqBkCancel(that.dataSource)
        }
      })
      operator.push({
        name: '冲销提交',
        icon: 'check-circle',
        that: this,
        batch: true,
        handler: function(table, that) {
          that.visible = true
          // that.saveForRecDeliReqBkConf()
        }
      })
      operator.push({
        name: 'SAP同步',
        icon: 'sync',
        that: this,
        batch: true,
        handler: function(table, that) {
          // that.reqCancel(that.dataSource)
        }
      })
      return {
        api: Object.assign(api, this.api),
        visible: false,
        confirmLoading: false,
        postDate: '',
        cerDate: '',
        cerTxt: '',
        // editingKey: '',
        recDecId: '',
        //列表初始化查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '状态',
            align: 'center',
            dataIndex: 'syncStatus',
            scopedSlots: { customRender: 'syncStatus' },
            width: 100,
            sorter: (a, b) => a.syncStatus.length - b.syncStatus.length
          },
          {
            title: '项目代码',
            align: 'center',
            dataIndex: 'projectCode',
            width: 100,
            sorter: (a, b) => a.projectCode.length - b.projectCode.length
          },
          {
            title: '项目名称',
            align: 'center',
            dataIndex: 'projectName',
            width: 350,
            sorter: (a, b) => a.projectName.length - b.projectName.length
          },
          {
            title: '专业代码',
            align: 'center',
            dataIndex: 'majorCode',
            width: 100,
            sorter: (a, b) => a.majorCode.length - b.majorCode.length
          },
          {
            title: '专业名称',
            align: 'center',
            dataIndex: 'majorName',
            width: 100,
            sorter: (a, b) => a.majorName.length - b.majorName.length
          },
          {
            title: '工程包代码',
            align: 'center',
            dataIndex: 'packageNo',
            width: 100,
            sorter: (a, b) => a.packageNo.length - b.packageNo.length
          },
          {
            title: '工程包名称',
            align: 'center',
            dataIndex: 'packageName',
            width: 100,
            sorter: (a, b) => a.packageName.length - b.packageName.length
          },
          {
            title: '冲销申请人',
            align: 'center',
            dataIndex: 'recDelAppBkUserName',
            width: 100,
            sorter: (a, b) => a.recDelAppBkUserName.length - b.recDelAppBkUserName.length
          },
          {
            title: '冲销申请时间',
            align: 'center',
            dataIndex: 'createTime',
            scopedSlots: { customRender: 'createTime' },
            width: 100,
            sorter: (a, b) => a.createTime.length - b.createTime.length
          },
          {
            title: '本次冲销数量',
            align: 'center',
            dataIndex: 'charOffCount',
            width: 100,
            sorter: (a, b) => a.charOffCount.length - b.charOffCount.length
          },
          // {
          //   title: '冲销过帐日期',
          //   align: 'center',
          //   dataIndex: 'budatBk',
          //   // width: 150,
          //   // scopedSlots: {
          //   //   customRender: 'budatBk'
          //   // },
          //   width: 150
          // },
          // {
          //   title: '冲销凭证日期',
          //   align: 'center',
          //   dataIndex: 'bldatBk',
          //   // width: 150,
          //   // scopedSlots: {
          //   //   customRender: 'bldatBk'
          //   // },
          //   width: 150
          // },
          // {
          //   title: '冲销抬头文本',
          //   align: 'center',
          //   dataIndex: 'bktxtBk',
          //   // scopedSlots: {
          //   //   customRender: 'bktxtBk'
          //   // },
          //   width: 150
          // },
          {
            title: '领料申请ID',
            align: 'center',
            dataIndex: 'recDecId',
            width: 80,
            sorter: (a, b) => a.recDecId.length - b.recDecId.length
          }
        ],
        operator: operator
        // dataSource: [],
        // editSlots: ['budatBk', 'bldatBk', 'bktxtBk']
      }
    },
    created() {
    },
    filters: {
      format(time) {
        const date = new Date(time)
        return formatDate(date, 'yyyy-MM-dd')
      },
      formatSyncStatusForCancel(syncStatus) {
        return formatSyncStatusForCancel(syncStatus)
      }
    },
    methods: {
      // edit(record, key) {
      //   if (this.editingKey === key) {
      //     this.editingKey = ''
      //
      //     if (this.dataSource.length !== 0) {
      //       this.axios({
      //         url: this.api.recDeliBkReqConf.update,
      //         method: 'post',
      //         data: this.dataSource
      //       }).then((data) => {
      //         this.editingKey = ''
      //         console.log(data)
      //         this.$message.success('操作成功')
      //         this.$refs.table.refresh()
      //       }).catch(function(err) {
      //         if (err) {
      //           this.editingKey = ''
      //           console.log(err)
      //         }
      //       })
      //     }
      //   } else {
      //     this.editingKey = key
      //   }
      // },
      // handleChange(value, key, column, record) {
      //   const newData = [...this.dataSource]
      //   const target = newData.filter((item) => key === item.recDecId)[0]
      //   record[column] = value
      //   if (target) {
      //     target[column] = value
      //     newData['recDecId'] = key
      //     this.dataSource = newData
      //   } else {
      //     const newData2 = {}
      //     newData2['recDecId'] = key
      //     newData2[column] = value
      //     this.dataSource.push(newData2)
      //   }
      // },
      dataValueChangeForPostDate(dates, dateStrings) {
        this.postDate = dateStrings
      },
      dataValueChangeForcerDate(dates, dateStrings) {
        this.cerDate = dateStrings
      },
      valueChange(val) {
        if (val.target.name === 'cerTxt') {
          this.cerTxt = val.data
        }
        console.log(val)
      },
      handleOk(e) {
        this.confirmLoading = true
        setTimeout(() => {
          this.saveForRecDeliReqBkConf()
          this.confirmLoading = false
          this.visible = false
        }, 2000)
      },
      handleCancel(e) {
        this.visible = false
      },

      saveForRecDeliReqBkConf() {
        let selectIdsVal = this.$refs.table.getSelectedRowKey()
        this.axios({
          url: this.api.recDeliBkReqConf.add,
          method: 'post',
          data: {
            selectIds: selectIdsVal,
            postDate: this.postDate,
            cerDate: this.cerDate,
            cerTxt: this.cerTxt
          }
        }).then((data) => {
          this.editingKey = ''
          console.log(data)
          this.$message.success('操作成功')
          this.$refs.table.refresh()
          selectIdsVal = []
          this.$refs.table.clearSelected()
        }).catch(function(err) {
          if (err) {
            this.editingKey = ''
            console.log(err)
          }
        })
      },
      reqBkCancel(dataSource) {
        let selectIds = this.$refs.table.getSelectedRowKey()
        console.log(selectIds)
        this.axios({
          url: this.api.recDeliBkReqConf.reqBkCancel,
          method: 'post',
          data: selectIds
        }).then((data) => {
          this.editingKey = ''
          console.log(data)
          this.$message.success('操作成功')
          this.$refs.table.refresh()
          selectIds = []
          this.$refs.table.clearSelected()
        }).catch(function(err) {
          if (err) {
            this.editingKey = ''
            console.log(err)
          }
        })
      }
    }
  }
</script>
